<template>
  <div class="shenye">
    <div class="tltle">
      <div class="xian"></div>
      <div class="txt">统计数据</div>

    </div>
    <div class="information">
      <div class="list back noBor">最近登录神椰时间</div>
      <div class="list noBor">{{ info.shenyeLastLoginTime }}</div>
      <div class="list back noBor">最近交易时间</div>
      <div class="list noBor">{{ info.transactionTime }}</div>
      <div class="list back noBor">最近消费金额</div>
      <div class="list noBor">{{ info.payMoney }}</div>
    </div>
    <div class="tltle">
      <div class="xian"></div>
      <div class="txt">统计数据</div>
      <el-button style="margin-left:20px" size="mini" type="primary" @click="handleCard()">
        数字权益卡详情</el-button>
    </div>
    <div class="orderBox">
      <div class="header">
        <div class="th">订单类型</div>
        <div class="th">订单数量</div>
        <div class="th">支付金额</div>
        <div class="th">交易CoCo</div>
        <div class="th">交易椰分</div>
        <div class="th">操作</div>
      </div>
      <div class="main">
        <div class="list">
          <div class="tb">赚卡</div>
          <div class="tb">{{ info.merchantEquityCardOrderNum }}</div>
          <div class="tb">{{ info.merchantEquityCardPayMoney }}</div>
          <div class="tb">-</div>
          <div class="tb">{{ info.merchantEquityCardYf }}</div>
          <div class="tb">
            <el-button size="mini" type="text" @click="handleDetail(info, 1)">详情</el-button>
          </div>
        </div>
        <div class="list">
          <div class="tb">组队活动</div>
          <div class="tb">{{ info.punchActivityOrderNum }}</div>
          <div class="tb">{{ info.punchActivityPayMoney }}</div>
          <div class="tb">-</div>
          <div class="tb">-</div>
          <div class="tb">
            <el-button size="mini" type="text" @click="handleDetail(info, 2)">详情</el-button>
          </div>
        </div>
        <div class="list">
          <div class="tb">盲盒</div>
          <div class="tb">{{ info.boxOrderNum }}</div>
          <div class="tb">{{ info.boxPayMoney }}</div>
          <div class="tb">{{ info.boxCoCo }}</div>
          <div class="tb">{{ info.boxYf }}</div>
          <div class="tb">
            <el-button size="mini" type="text" @click="handleDetail(info, 3)">详情</el-button>
          </div>
        </div>
        <div class="list">
          <div class="tb">集市</div>
          <div class="tb">{{ info.changeOrderNum }}</div>
          <div class="tb">{{ info.changePayMoney }}</div>
          <div class="tb">{{ info.changeCoCo }}</div>
          <div class="tb">{{ info.changeYf }}</div>
          <div class="tb">
            <el-button size="mini" type="text" @click="handleDetail(info, 4)">详情</el-button>
          </div>
        </div>
        <div class="list">
          <div class="tb">合成</div>
          <div class="tb">{{ info.castingOrderNum }}</div>
          <div class="tb">-</div>
          <div class="tb">{{ info.castingCoCo }}</div>
          <div class="tb">{{ info.castingYf }}</div>
          <div class="tb">
            <el-button size="mini" type="text" @click="handleDetail(info, 5)">详情</el-button>
          </div>
        </div>
        <div class="list">
          <div class="tb">销毁</div>
          <div class="tb">{{ info.destroyOrderNum }}</div>
          <div class="tb">-</div>
          <div class="tb">-</div>
          <div class="tb">-</div>
          <div class="tb">
            <el-button size="mini" type="text" @click="handleDetail(info, 6)">详情</el-button>
          </div>
        </div>
        <div class="list back">
          <div class="tb">小计</div>
          <div class="tb">{{ info.orderNumTotal }}</div>
          <div class="tb">{{ info.payMoneyTotal }}</div>
          <div class="tb">{{ info.cocoTotal }}</div>
          <div class="tb">{{ info.yfTotal }}</div>
          <div class="tb">-</div>
        </div>
        <div class="list">
          <div class="tb noBor">赚卡退卡</div>
          <div class="tb noBor">{{ info.refundOrderNum }}</div>
          <div class="tb noBor">{{ info.refundPayMoney }}</div>
          <div class="tb noBor">-</div>
          <div class="tb noBor">-</div>
          <div class="tb noBor">
            <el-button size="mini" type="text" @click="handleDetail(info, 7)">详情</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
    
<script>
import {
  shenyeOrderDetail,
} from "@/api/members/membersDetail";
export default {
  name: "Customer",
  components: {

  },
  props: {
    id: String,
  },
  data() {
    return {
      info: {},
    };
  },
  computed: {

  },
  created() {
    this.getDetail();
  },
  methods: {

    /** 查询会员列表列表 */
    getDetail() {
      this.loading = true;
      shenyeOrderDetail(this.id).then(res => {
        this.info = res.result
        for (var key in this.info) {
          if (this.info[key] === '') {
            this.info[key] = "-";
          }
        }
        this.loading = false;
      });
    },
    //数字权益卡详情
    handleCard() {
      this.$router.push({
        path: "/members/Prepaid-details",
        query: {
          id: this.id,
          type: 1
        },
      })
    },
    //coin详情
    handleDetail(row, type) {
      if (type == 1) {
        this.$router.push({
          path: "/yeCard/orderList",
          query: {
            phone: row.phone,
          },
        })
      } else if (type == 2) {
        this.$router.push({
          path: "/consumeMiningManagement/checkinActivityOrderList",
          query: {
            phone: row.phone,
          },
        })
      } else if (type == 3) {
        this.$router.push({
          path: "/boxOrder/index",
          query: {
            phone: row.phone,
          },
        })
      } else if (type == 4) {
        this.$router.push({
          path: "/commodityExchange",
          query: {
            phone: row.phone,
          },
        })
      } else if (type == 5) {
        this.$router.push({
          path: "/synthesisOrder",
          query: {
            phone: row.phone,
          },
        })
      } else if (type == 6) {
        this.$router.push({
          path: "/destroyOrder",
          query: {
            phone: row.phone,
          },
        })
      } else if (type == 7) {
        this.$router.push({
          path: "/zhuanReturn",
          query: {
            phone: row.phone,
          },
        })
      }

    },

  }
};

</script>
<style lang="scss" scoped>
.kyy {}

.tltle {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 24px;

  .xian {
    width: 5px;
    height: 24px;
    border-radius: 11px;
    background: #46a6ff;
  }

  .txt {
    margin-left: 10px;
    font-size: 18px;
    color: #222;
    font-weight: 600;
  }
}

.information {
  border: 1px solid #dfe6ec;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-bottom: 24px;

  .back {
    background: #f5f5f5;
    font-size: 16px;
    font-weight: 600;
  }

  .list {
    width: 16.666%;
    padding: 14px 0;
    text-align: center;
    font-size: 16px;
    color: #606266;
    border-right: 1px solid #dfe6ec;
    border-bottom: 1px solid #dfe6ec;
    word-wrap: break-word;
  }

  .noBor {
    border-bottom: none !important;
  }
}

.orderBox {
  border: 1px solid #dfe6ec;

  .back {
    background: #f5f5f5;
  }

  .noBor {
    border-bottom: none !important;
  }

  .header {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;

    .th {
      flex: 1;
      text-align: center;
      height: 48px;
      line-height: 48px;
      border-right: 1px solid #dfe6ec;
      border-bottom: 1px solid #dfe6ec;
      background: #f5f5f5;
    }
  }

  .main {
    .list {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;

      .tb {
        flex: 1;
        text-align: center;
        height: 40px;
        line-height: 40px;
        border-right: 1px solid #dfe6ec;
        border-bottom: 1px solid #dfe6ec;
      }
    }
  }
}</style>
    